<style lang="sass" scoped>
    .system{
        li{
            display:inline-block; 
        }  
    }
    .system li a:hover{color:#fff!important;}
    .block_alert_cheng .conmain{
        min-width:500px;
    }
    .danger{
        background:#fbd5d5;
    }
    .main{
        padding:20px;
        border:solid 1px #ddd;
        background:#fff;
        border-top:none;
        padding-bottom:30px;
    }
    .receive-email{
        word-break:break-all; 
    }
</style>

<template>
<div class="container-fluid">
    <div class="row comm_conent_padding">
        <nav-bar><li slot="nav_two">系统管理</li></nav-bar>

        <!-- 切换nav -->
        <ul class="nav nav-tabs">
            <li class="active" @click="selectSystems($event,'system')"><a href="javascript:">系统邮件管理</a></li>
            <li @click="selectSystems($event,'company')"><a href="javascript:">活动邮件管理</a></li>
            <span class="red mt10 mr20 fr">(设置邮件接收人作用：发布正式服时邮件通知相应人员!)</span>  
        </ul>

        <!-- 系统列表 -->
        <div class="main mb20">
            <div class="block">
                <!-- 按公司搜索 -->
                <div class="block mb20">
                    <b>所属公司：</b>
                    <select class="form-control w-250 inline_block" v-model="companyCode">
                        <option value="">全部公司</option>
                        <option v-for="(item,index) in conpanyLlist" :key="index" :value="item.companyCode">{{item.companyName}}</option>
                    </select>
                </div>
                <div class="table-responsive mt20" v-show="systemList.length">
                    <table class="table table-bordered table_color" v-show="type=='system'">
                        <tr class="tr_info">
                            <th class="tc">系统名字</th>
                            <th class="tc">系统编码</th>
                            <th class="tc">公司编码</th>
                            <th class="tc">系统发布接收邮件人</th>
                            <th class="tc">操作</th>
                        </tr>
                        <tr v-for="item in systemList">
                            <td class="tc" v-text="item.sysName"></td>
                            <td class="tc" v-text="item.sysCode"></td>
                            <td class="tc" v-text="item.companyCode"></td>
                            <td class="w-400 receive-email" v-text="item.receiveEmail"></td>
                            <td>
                                <button class="btn btn-success btn-sm" v-on:click="addCount('update',item)" type="button">设置邮件接收人</button>
                            </td>
                        </tr>
                    </table>  
                    <table class="table table-bordered table_color" v-show="type=='company'">
                        <tr class="tr_info">
                            <th class="tc">公司名字</th>
                            <th class="tc">公司编码</th>
                            <th class="tc">系统发布接收邮件人</th>
                            <th class="tc">操作</th>
                        </tr>
                        <tr v-for="item in conpanyLlist">
                            <td class="tc" v-text="item.companyName"></td>
                            <td class="tc" v-text="item.companyCode"></td>
                            <td class="w-400 receive-email" v-text="item.receiveEmail"></td>
                            <td>
                                <button class="btn btn-success btn-sm" v-on:click="addCount('update',item)" type="button">设置邮件接收人</button>
                            </td>
                        </tr>
                    </table> 
                </div>

                <div class="tc mt30" v-show="!systemList.length">还没有系统额!</div>
            </div>
        </div>

        <!-- 新增 | 修改 系统 -->
        <modal :backdrop="false" :show="modal.show" :title="modal.title" :callback ="onSubmit" @onPropsChange="change">
            <div slot="modal-body">
                <div class="main pd15">
                    <div class="block overflow mb10">
                        <div class="left fl mr20 mt5 w-100 tr">设置收邮件人:</div>
                        <div class="right fl">
                            <textarea class="form-control w-400" v-model="modal.receiveEmail" rows="10" placeholder="请用’,‘号隔开,一行一个!"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </modal>

    </div>    
</div>
</template>

<script>
    import navBar from 'components/navBar' 
    import modal from 'components/modal'

    export default {
        components: {
            navBar,
            modal,
        },
        data(){
            return {
                conpanyLlist:[],
                systemList:[],
                companyCode:'',
                type:'system',
                modal:{
                    show:false,
                    title:'设置邮件接收人',
                    id:'',
                    receiveEmail:'',
                },
                
            }
        },
        watch:{
            'companyCode'(){
                this.getSystemList();
            }
        },
        mounted() {
            this.$nextTick(()=>{
                this.getCompanyList();
                this.getSystemList();
            })

        },
        methods: {
            change(propName,newVal,oldVal){
                this.modal[propName]=newVal;
            },
            selectSystems($event,type){
                let nodeName = $event.target.nodeName
                let ele = null
                if(nodeName == 'A'){
                    ele = $($event.target).parent('li')
                }else if(nodeName == 'LI'){
                    ele = $($event.target)
                }
                ele.addClass('active').siblings('li').removeClass('active');
                
                if(type == 'company'){
                    this.type =  'company'

                }else if(type == 'system'){
                    this.type =  'system'   

                };

            },
            // 获得系统列表
            getCompanyList(){
                util.ajax({
                    url:config.baseApi+'api/getCompanyList',
                    success:data=>{
                        this.conpanyLlist = data.data;
                    }
                }) 
            },

            // 获得系统列表
            getSystemList(){
                util.ajax({
                    url:config.baseApi+'api/getSystemListForCompanyCode',
                    data:{
                        companyCode:this.companyCode,
                    },
                    success:data=>{
                        this.systemList = data.data;
                    }
                })
            },

            addCount(type,item){
                this.modal = util.emptyJson(this.modal)
                this.modal.show = true;

                if(type == 'update'){
                    this.modal.id              =  item.id
                    this.modal.receiveEmail     =  item.receiveEmail 
                } 
            },

            // 设置邮件
            onSubmit(){
                let api = null;
                if(this.type == 'system'){
                    api = 'api/setReceiveEmailForSystem'
                }else if(this.type == 'company'){
                    api = 'api/setReceiveEmailForCompany'
                };

                util.ajax({
                    url:config.baseApi + api,
                    data:{
                        id:this.modal.id,
                        receiveEmail:this.modal.receiveEmail.replace(/，/g,','),
                    },
                    success:data=>{
                        if(this.type == 'system'){
                            this.getSystemList();
                        }else if(this.type == 'company'){
                            this.getCompanyList();
                        };
                        this.modal.show = false;
                        popup.miss({title:'操作成功!'})
                    }
                })


            },
           
        },
    }
</script>


